let _Vue = null
export default class VueRouter {
  static install (Vue) {
    // 判断当前的插件是否安装成功
    if (VueRouter.install.installed) {
      return
    }
    VueRouter.install.installed = true
    _Vue = Vue
    // 创建Vue实例的时候传入的Router对象注入到Vue实例上,但是混入的时候组件中也会有,但是指向Vue实例对象中有!
    _Vue.mixin(
      beforeCreate() {
        if (this.$options.router) {
          _Vue.prototype.$router = this.$options.router
        }
      }
    )
  }

  constructor (options) {

  }
}



init() {
  this.createRouteMap()
  this.initComponents(_Vue)
  this.initEvent()
}
createRouteMap() {

}
// 1. 调用pushstate改变浏览器的地址栏,这个方法改变了浏览器的地址但是不会像服务端发送请求
initComponents(Vue) {
  Vue.component('router-link',{
    props: {
      to: String
    },
    render(h) {
      return h('a', {
        attrs:{
          href: this.to
        },
        on: {
          click: this.clickHandler
        }
      },[this.$slots.default])
    },
    methods: {
      // 默认点击会向服务器发出请求所以需要修改默认的点击事件
      clickHandler (e) {
        // data title url
        history.pushState({},'', this.to)
        // current.to是响应式的对象,值的改变会直接加载组件
        this.$router.data.current = this.to
        e.preventDefault()
      }
      // 但是现在的话就失去了地址栏点击前进和后退然后重新加载组件的功能了! popState!

    }
  })
  Vue.component('router-view',{
    const self = this
    // h函数把组件转化成为虚拟dom
    render(h) {
      // 获取当前的路由地址, render里面的this不是vue-router的实例!
      // self.data.current
      // 然后根据地址从router map中获取组件!
      const component = self.routeMap[self.data.current]
      return h(component)
    }
  })
}

initEvent() {
  window.addEventListener('popstate',()=> {
    // 手动设置浏览器的pathname部分的值
    this.data.current = window.location.pathname
  })
}